<html>
<head>
  <title>Vue.js Pet Depot</title>
  <script src="https://unpkg.com/vue"></script>
  <link rel="stylesheet" type="text/css" href="assets/css/app.css"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<div id="app">
  <header>
    <div class="navbar navbar-default">
      <div class="navbar-header">
        <h1>{{ sitename }}</h1>
      </div>
      <div class="nav navbar-nav navbar-right cart">
        <button type="button" class="btn btn-default btn-lg" v-on:click="showCheckout">
          <span class="glyphicon glyphicon-shopping-cart">{{ cartItemCount}}</span> Checkout
        </button>
      </div>
    </div>
  </header>
  <main>
    <div class="row">
      <div v-if="showProduct">
        <div class="col-md-2 col-md-offset-1">
          <figure>
            <img v-bind:src="product.image">
          </figure>
        </div>
        <div class="col-md-6 col-md-offset-2 description">
          <h1 v-text="product.title"></h1>
          <p v-html="product.description"></p>
          <p class="price">
            {{product.price | formatPrice}}
          </p>
          <button class=" btn btn-primary btn-lg"
            v-on:click="addToCart"
            v-if="canAddToCart">Add to cart</button>
            <button disabled="true" class=" btn btn-primary btn-lg"
              v-else >Add to cart</button>
        </div>
      </div>
      <div v-else>
        <div class="col-md-10 col-md-offset-1">
          <div class="panel panel-info">
            <div class="panel-heading">Pet Depot Checkout</div>
            <div class="panel-body">
              <div class="form-group">
                <div class="col-md-12">
                  <h4><strong>Enter Your Information</strong></h4>
                </div>
                <div class="form-group">
                  <div class="col-md-6">
                    <strong>First Name:</strong>
                    <input v-model.trim="order.firstName" class="form-control" />
                  </div>
                  <div class="col-md-6">
                    <strong>Last Name:</strong>
                    <input v-model.trim="order.lastName" class="form-control" />
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-md-12"><strong>Address:</strong></div>
                  <div class="col-md-12">
                    <input v-model.trim="order.address" class="form-control" />
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-md-12"><strong>City:</strong></div>
                  <div class="col-md-12">
                    <input v-model.trim="order.city" class="form-control" />
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-md-2">
                    <strong>State:</strong>
                    <select v-model="order.state" class="form-control">
                      <option disabled value="">State</option>
                      <option v-for="(state, key) in states" v-bind:value="state">
                        {{key}}
                      </option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-md-6 col-md-offset-4">
                    <strong>Zip / Postal Code:</strong>
                    <input v-model.number="order.zip"
                      class="form-control"
                      type="number"/>
                  </div>
                </div>

                <div class="form-group">
                  <div class="col-md-6 boxes">
                    <input type="checkbox"
                      id="gift" value="true"
                      v-bind:true-value="order.sendGift"
                      v-bind:false-value="order.dontSendGift"
                      v-model="order.gift">
                    <label for="checkbox">Ship As Gift?</label>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-md-6 boxes">
                    <input type="radio"
                      id="home"
                      v-bind:value="order.home"
                      v-model="order.method">
                    <label for="home">Home</label>
                    <input type="radio"
                      id="business"
                      v-bind:value="order.business"
                      v-model="order.method">
                    <label for="business">Business</label>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-md-6">
                    <button type="submit" class="btn btn-primary submit" v-on:click="submitForm">Place Order</button>
                  </div>
                </div>
                <div class="col-md-12 verify">
                  <pre>
                    First Name: {{order.firstName}}
                    Last Name: {{order.lastName}}
                    Address: {{order.address}}
                    City: {{order.city}}
                    Zip: {{order.zip}}
                    State: {{order.state}}
                    Method: {{order.method}}
                    Gift: {{order.gift}}
                  </pre>
                </div>
              </div>
            </div>
          </div>


        </div>
      </div>
    </div>

  </main>

</div>
    <script type="text/javascript">
    var APP_LOG_LIFECYCLE_EVENTS = true;
    var webstore = new Vue({
      el: '#app',
      data: {
        sitename: "Vue.js Pet Depot",
        showProduct: true,
        a: false,
        states: {
          AL: 'Alabama',
          AK: 'Alaska',
          AR: 'Arizona',
          CA: 'California',
          NV: 'Nevada'
        },
        order: {
          firstName: '',
          lastName: '',
          address: '',
          city: '',
          zip: '',
          state: '',
          method: 'Home Address',
          business: 'Business Address',
          home: 'Home Address',
          gift:'Send As A Gift',
          sendGift: 'Send As A Gift',
          dontSendGift: 'Do Not Send As A Gift'
        },
        product: {
          id: 1001,
          title: "Cat Food, 25lb bag",
          description: "A 25 pound bag of <em>irresistible</em>, organic goodness for your cat.",
          price: 2000,
          image: "assets/images/product-fullsize.png",
          availableInventory: 5
        },
        cart: []
      },
      methods: {
        addToCart: function() {
          this.cart.push( this.product.id );
        },
        showCheckout() {
          this.showProduct = this.showProduct ? false: true;
        },
        submitForm() {
          alert('Submitted');
        }
      },
      computed: {
        cartItemCount() {
          return this.cart.length || '';
        },
        canAddToCart() {
          return this.product.availableInventory > this.cartItemCount;
        }
      },
      filters: {
        formatPrice(price) {	//#B
          if (!parseInt(price)) { return ""; }	//#C
          if (price > 99999) {	//#D
            var priceString = (price / 100).toFixed(2);	//#E
            var priceArray = priceString.split("").reverse();	//#F
            var index = 3;	//#F
            while (priceArray.length > index + 3) {	//#F
              priceArray.splice(index+3, 0, ",");	//#F
              index += 4;	//#F
            }	//#F
            return "$" + priceArray.reverse().join("");	//#G
          } else {
            return "$" + (price / 100).toFixed(2);	//#H
          }
        }

      },
      beforeCreate: function() {	//#B
    if (APP_LOG_LIFECYCLE_EVENTS) {	//#B
      console.log("beforeCreate");	//#B
    }	//#B
  },	//#B
  created: function() {	//#C
    if (APP_LOG_LIFECYCLE_EVENTS) {	//#C
      console.log("created");	//#C
    }	//#C
  },	//#C
  beforeMount: function() {	//#D
    if (APP_LOG_LIFECYCLE_EVENTS) {	//#D
      console.log(" beforeMount");	//#D
    }	//#D
  },	//#D
  mounted:  function() {	//#E
    if (APP_LOG_LIFECYCLE_EVENTS) {	//#E
      console.log(" mounted"); 	//#E
    } 	//#E
  },	//#E
  beforeUpdate:  function() { 	//#F
    if (APP_LOG_LIFECYCLE_EVENTS) { 	//#F
      console.log("beforeUpdate"); 	//#F
    } 	//#F
  },	//#F
  updated:  function() { 	//#G
    if (APP_LOG_LIFECYCLE_EVENTS) { 	//#G
      console.log("updated"); 	//#G
    } 	//#G
  },	//#G
  beforeDestroyed:  function() { 	//#H
    if (APP_LOG_LIFECYCLE_EVENTS) { 	//#H
      console.log("beforeDestroyed "); 	//#H
    } 	//#H
  },	//#H
  destroyed:  function() { 	//#I
    if (APP_LOG_LIFECYCLE_EVENTS) { 	//#I
      console.log("destroyed"); 	//#I
    } 	//#I
  }	//#I
});

    </script>
  </body>
</html>
